// Offset describes the distance of the top part of the triangle
@mixin cut-left-corner($offset) {
  mask: linear-gradient(120deg, #0000 0 $offset, #000 0) top left;
}

@mixin cut-right-corner($offset) {
  mask: linear-gradient(-120deg, #0000 0 $offset, #000 0) top right;
}

@mixin cut-two-corners($offset) {
  clip-path: polygon(
    // Top-left corner, left-value is the distance
    $offset 0%,
    100% 0,
    //right middle-point is right-value
    100% calc(100% - $offset * math.tan(60deg)),
    // bottom-right-corner, left-value
    calc(100% - $offset) 100%,
    0 100%,
    //distance of left-side middle-point
    0 ($offset * math.tan(60deg))
  );
}

@mixin slider-card($sideMargin: $margin, $marginBetween: 14px) {
  display: inline-block;
  margin-right: $marginBetween;

  &:nth-of-type(1) {
    margin-left: $sideMargin;
  }

  &:last-of-type {
    margin-right: $sideMargin;
  }
}

@mixin truncate($n-lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $n-lines; /* number of lines to show */
  line-clamp: $n-lines;
  -webkit-box-orient: vertical;
}

@mixin hide-scrollbar() {
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
  }
}

@mixin bottom-cut-corner-section($color: #f5f0e6) {
  padding: 40px 0 10px 0;
  margin-top: 30px;
  background: $color;
  @include cut-left-corner(27px);
}

@mixin link-text($color: $colorViking, $underline: true) {
  position: relative;
  font-family: $notoSans;
  font-size: $title-s;
  color: $color;

  @if $underline {
    // Custom underline
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: $color;
    }
  }
}
